<template>
	<nav class="common-footer-rd box-row">
		<router-link :to="'/index'" tag="div" active-class="nav-item-active_index" class="nav-item nav-item_index flex-1">
			<i></i>
			<p>首页</p>
		</router-link>
		<router-link :to="'/cate'" tag="div" active-class="nav-item-active_cate" class="nav-item nav-item_cate flex-1">
			<i></i>
			<p>分类</p>
		</router-link>
		<router-link :to="'/mine'" tag="div" active-class="nav-item-active_mine" class="nav-item nav-item_mine flex-1">
			<i></i>
			<p>我的</p>
		</router-link>
	</nav> 
</template>

<style scoped lang="scss">
	.common-footer-rd{
		width:100%;
		height:50px;
		padding:5px 0;
		position:fixed;
		bottom:0;
		left:0;
		background-color:#ffffff;
	    box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
	    -webkit-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
	    -moz-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);

		.nav-item{
			text-align: center;
			& i{
				display: inline-block;
				width:25px;
				height:25px;
			}
			& p{
				font-size: 12px;
				line-height: 1;
			}
		}

		@each $navItem in index,cate,mine{
			.nav-item_#{$navItem}{
				i{
					background: url("~__assets/images/common-footer-#{$navItem}-0.png") no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		@each $navItem in index,cate,mine{
			.nav-item-active_#{$navItem}{
				i{
					background: url("~__assets/images/common-footer-#{$navItem}-1.png") no-repeat;
					background-size: 100% 100%;
				}
				p{
					color:#F23820;
				}
			}
		}
	}
</style>

<script>
	
	export default{
		name:"common-footer"
	}

</script>